import React, {Component} from 'react';
import http from '../../http';
import OrderDetailStaticItem from './OrderDetailStaticItem';
import OrderDetailTable from './OrderDetailTable';

import '../../assets/css/orderDetail.scss';

class Detail extends Component {
	constructor(props) {
		super(props);
		this.state = {
			orderNo: '',
			createTime: '',
			receiverName: '',
			statusDesc: '',
			paymentTypeDesc: '',
			payment: '',
			orderItemVoList: [],
			imageHost: ''
		}
	}


	componentDidMount() {
		this.getOrderDetail()
	}

	getOrderDetail() {
		let orderNo = this.props.match.params.orderNo;
		http.getOrderDetail(orderNo).then(res => {
			if (res.status === 0) {
				this.setState({
					orderNo: res.data.orderNo,
					createTime: res.data.createTime,
					receiverName: res.data.receiverName,
					statusDesc: res.data.statusDesc,
					paymentTypeDesc: res.data.paymentTypeDesc,
					payment: res.data.payment,
					imageHost: res.data.imageHost,
					orderItemVoList: res.data.orderItemVoList
				})
			} else if (res.status === 10) {
				alert(res.msg);
				this.props.history.push('/login');
			}
		})
	}

	render() {
		return (
			<div>
				<div className="home-title">
					订单详情
				</div>
				<div className="form-wrap col-md-12 order-detail-container">
					<div className="form-horizontal">
						<OrderDetailStaticItem label="订单号" value={this.state.orderNo}/>
						<OrderDetailStaticItem label="创建时间" value={this.state.createTime}/>
						<OrderDetailStaticItem label="收件人" value={this.state.receiverName}/>
						<OrderDetailStaticItem label="订单状态" value={this.state.statusDesc}/>
						<OrderDetailStaticItem label="支付方式" value={this.state.paymentTypeDesc}/>
						<OrderDetailStaticItem label="订单金额" value={'￥' + (this.state.payment || '0')}/>
						<OrderDetailTable imageHost={this.state.imageHost} data={this.state.orderItemVoList}/>
					</div>
				</div>
			</div>
		);
	}
}

export default Detail;